<template>
	<view class="content">
		<view class="card">
			<text class="t">张三</text>
			<text>微信号：deghuiadfn</text>
			<text>手机号：13962966563</text>
			<text>地址：啊时代发生的大师傅啊当时发生的发生的发大师傅打算发顺丰阿什顿飞阿什顿飞</text>
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="list">
			<view class="item" @click="detail()">
				<image src="../../static/logo.png" mode=""></image>
				<text class="title">标题标题标题标题标题标题标题标题</text>
				<view class="flex-r pi">
					<text class="price">￥16.0</text>
					<text class="line">6024</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			app.util.request({
			'url': 'entry/wxapp/index',
			'cachetime': '30',
			success(res) {
				console.log(res)
			}
		})
		},
		methods: {
			detail() {
				uni.navigateTo({
					url: '../detail/detail'
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		box-shadow: 0 0 20rpx #ccc;
		padding: 20rpx;
		position: relative;
	}

	.card .t {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.card text {
		line-height: 40rpx;
		width: 400rpx;
		color: #333;
	}

	.card image {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.list {
		padding: 0 30rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.item {
		width: 330rpx;
		margin: 0 30rpx 30rpx 0;
		background: #fff;
	}

	.item:nth-of-type(2n) {
		margin-right: 0;
	}

	.item image {
		width: 330rpx;
		height: 330rpx;
	}

	.title {
		padding: 10rpx 15rpx;
		height: 70rpx;
		display: -webkit-box; //重要
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pi {
		padding: 0 15rpx 10rpx;
	}

	.price {
		color: #DD524D;
		font-weight: bold;
		font-size: 32rpx;
	}

	.line {
		color: #C0C0C0;
		font-size: 26rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
</style>
